<style>
    .twoDiv{
        padding: 10px 0px;
        border-bottom: 1px solid #f6f6f6;
        color: #333;
        height: 120px;
    }
    .three{
        height: 500px;
        padding: 10px 0px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览</div>

                        <div class="layui-card-body">
                            <div class="twoDiv ">
                                <form class="layui-form layui-form-pane" action="#" lay-filter="example">
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">运单号：</label>
                                            <div class="layui-inline">
                                                <input type="text" id="waybill_id" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">到达分站：</label>
                                            <div class="layui-inline">
                                                <select name="substationunit" id="substationUnit">
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">运输类型：</label>
                                            <div class="layui-inline">
                                                <select name="typetransportation" id="typetransportation" >
                                                    <option value="请选择">请选择</option>
                                                    <option value="普通运输">普通运输</option>
                                                    <option value="加急卡班">加急卡班</option>
                                                    <option value="整车运输">整车运输</option>
                                                    <option value="航空运输">航空运输</option>
                                                    <option value="铁路运输">铁路运输</option>
                                                    <option value="冷链运输">冷链运输</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">送货方式：</label>
                                            <div class="layui-inline">
                                                <select name="modetransport" id="modetransport" lay-verify="required">
                                                    <option value="请选择">请选择</option>
                                                    <option value="自提">自提</option>
                                                    <option value="等通知提">等通知提</option>
                                                    <option value="等通知送">等通知送</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">收货地址：</label>
                                            <div class="layui-inline">
                                                <input type="text" id="remark" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo2">查询</button>
                                    </div>
                                </form>
                            </div>
                            <div class="three" >
                                <table id="ui" lay-filter="ui"></table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarRole">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addRole" type="button">派送登记</button>
        <button class="layui-btn layui-btn-sm" lay-event="pai" type="button">批量派送</button>
    </div>
</script>
<script>
    layui.use(['table', 'form', 'jquery', 'layer', 'tree','util'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate,
            table = layui.table;
        var $ = layui.jquery;
        form.render();
        $.ajax({
            url: "../../getAllSubstation",
            type: "post",
            data: {},
            dataType: "json",
            success: function (data) {
                //动态添加下拉框
                for (var i = 0; i < data.length; i++) {
                    $("#substationUnit").append("<option value='" + data[i].subId + "'>" + data[i].subName + "</option>");
                }
                //刷新
                form.render('select');
            }
        })

        //第一表
        table.render({
            elem: '#ui'
            ,id:"yi"
            ,height: 500
            ,url: '../../getAllCentre' //数据接口
            ,toolbar: '#toolbarRole' //开启头部工具栏，并为其绑定左侧模板
            ,limit:5
            ,limits:[5,10,15,20]
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'waybill_id', title: '运单号', sort: true,width:220}
                ,{field: 'consignDate', title: '托运日期',width:120}
                ,{field: 'sub_name', title: '到达分站',width:120}
                ,{field: 'state', title: '运单状态',width:120}
                ,{field: 'typeTransportation', title: '运输类型',width:120}
                ,{field: 'modeTransport', title: '送货方式',width:120}
                ,{field: 'descriptionGoods', title: '货物名称',width:180}
                ,{field: 'quantity', title: '货物数量',width:120}
                ,{field: 'weight', title: '货物重量',width:120}
                ,{field: 'volume', title: '货物体积',width:120}
                ,{field: 'freightCollect', title: '到付',width:120}
                ,{field: 'clientName', title: '收货人名称',width:120}
                ,{field: 'phone', title: '收货人电话',width:120}
                ,{field: 'alternatePhone', title: '备用电话',width:120}
                ,{field: 'remark', title: '地址',width:350}
                ,{field: 'remarktwo', title: '备注',width:120}
            ]]
        });



        //第一个表的头部事件
        table.on('toolbar(ui)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            if (data.length==0){
                alert("请选择一行进行操作")
            } else {
                //判断是否选中了
                switch(obj.event){
                    case 'addRole':
                        var id=data[0].waybill_id;
                        layer.open({
                            type: 2,
                            title: '订单派送',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['1000px', '520px'],
                            content: '../src/views/shunt/iframe/addCentre.html?id='+id //iframe的url
                        });
                        break;
                    case 'pai':
                        //封装数据
                        var k="";
                        for (var i=0;i<data.length-1;i++){
                            k+=data[i].waybill_id+"-"
                        }
                        k+=data[data.length-1].waybill_id
                        $.ajax({
                            url: "../../updateState",
                            type: "post",
                            data: {
                                state:k
                            },
                            dataType: "text",
                            success: function (data) {
                                //刷新表格
                                table.reload('yi');
                            }
                        })
                        break;
                };
            }
        });


        //监听提交
        form.on('submit(demo2)', function(data){
            //执行重载
            table.reload('yi', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                //根据条件查询
                ,where: {
                    waybill_id:$("#waybill_id").val(),
                    sub_name:$('#substationUnit option:selected').text(),
                    remark:$('#remark').val(),
                    modeTransport:$('#modetransport option:selected').val(),
                    TypeTransportation:$('#typetransportation option:selected').val(),
                    id:"1"
                }
            });
            return false;
        });

    });
</script>


